<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三种简历之三</title>
    <style type="text/css">
        html body {
            padding: 0px;
            margin: 0px;
            background: #ccc;
        }

        h1 {
            line-height: 100px;
            background: #999;
            margin: 0px;
            padding-left: 40px;
            font-size: 48px;
            font-weight: 700;
            color: white;
        }

        .item {
            display: flex;
            flex-direction: column;
            height: 200px;
        }

        .info, .contact, .ability, .education, .project {
            display: flex;
            flex-direction: row;
            background: #fff;
            margin: 0px 0px 4px;
        }

        h2, h3, p {
            display: inline-block;
            margin: 10px;
        }

        .project-title, .education-title, .ability-title, .contact-title, .info-title {
            width: 200px;
            height: 200px;
            background: #aaa;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0px;
        }

    </style>
</head>
<body>
<h1>简历</h1>
<main>
    <section class="item info">
        <h2 class="info-title">基本信息</h2>
        <h3 class="info-item-title">姓名</h3>
        <p class="info-item">CodeDeer</p>
        <h3 class="info-item-title">性别</h3>
        <p class="info-item">男</p>
        <h3 class="info-item-title">应聘职位</h3>
        <p class="info-item">Web前端工程师</p>
    </section>
    <section class="item contact">
        <h2 class="contact-title">联系方式</h2>
        <h3 class="contact-item-title">手机</h3>
        <p class="contact-item">15238281019</p>
        <h3 class="contact-item-title">Email</h3>
        <p class="contact-item">emai@xluos.com</p>
        <h3 class="contact-item-title">个人主页</h3>
        <p class="contact-item"><a href="http://www.xluos.com">CoodDeer</a></p>
    </section>
    <section class="item ability">
        <h2 class="ability-title">能力描述</h2>
        <h3 class="ability-item-title">技术能力</h3>
        <p class="ability-item">掌握HTML，CSS，JavaScript</p>
        <h3 class="ability-item-title">综合能力</h3>
        <p class="ability-item">良好沟通，积极主动，努力勤奋</p>
    </section>
    <section class="item education">
        <h2 class="education-title">教育经历</h2>
        <h3 class="education-item-title">本科</h3>
        <p class="education-item">百度前端学院小薇学院</p>
        <h3 class="education-item-title">研究生</h3>
        <p class="education-item">百度前端学院斌斌学院</p>
    </section>
    <section class="item project">
        <h2 class="project-title">项目经历</h2>
        <h3 class="project-item-title">小度小度</h3>
        <p class="project-item">作为前端工程师参与ABC组件的开发</p>
        <h3 class="project-item-title">大度大度</h3>
        <p class="project-item">作为前端工程师参与DEF组件的开发</p>
    </section>

</main>
</body>
</html>